<template>
<div class="container">
    <div class="top-bt">
        <el-button type="back" icon="el-icon-arrow-left" @click="GoBack">返回</el-button>
        <el-button type="Submit" @click="submit">提交</el-button>
    </div>
    <div class="body-box">
        <h1>举报须知</h1>
        <!-- 富文本编辑器组件 -->
        <!-- <Editor v-model="text"></Editor> -->
        <div class="text-editor-box">
            <quill-editor v-model="note" />
        </div>
    </div>
</div>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            note: this.$route.params.ReportAll.note,
            onlneBgpic: this.$route.params.ReportAll.onlneBgpic,
            platformBgpic: this.$route.params.ReportAll.platformBgpic,
        };
    },
    methods: {
        //   返回
        GoBack() {
            // this.$store.commit("PortalManagement/set_reportIsActive", "second")
            this.$router.push({
                name: "ReportOnInternet",
            });

        },
        // 提交
        submit() {
            // this.$store.commit("PortalManagement/set_reportIsActive", "second")
            this.Api.getReportSaveAll({
                note: this.note,
                onlneBgpic: this.onlneBgpic,
                platformBgpic: this.platformBgpic,
            }).then((res) => {
                // console.log(res, 111);
                if (res.code === "0") {
                    this.$router.push({
                        name: "ReportOnInternet",
                    });

                }
            });
        },
    },
};
</script>

<style lang="less" scoped>
.container {
    padding: 0;

    .top-bt {
        display: flex;
        justify-content: space-between;
        background: rgba(240, 242, 245, 1);
        padding-bottom: 20px;

        .el-button--back {
            width: 70px;
            height: 36px;
            background: rgba(255, 255, 255, 1);
            border-radius: 4px;
            border: 1px solid rgba(221, 221, 221, 1);
            color: rgba(51, 51, 51, 1);
            padding: 0;
        }

        .el-button--Submit {
            width: 70px;
            height: 36px;
            background: rgba(61, 127, 255, 1);
            border-radius: 4px;
            border: 1px solid rgba(221, 221, 221, 1);
            color: #ffffff;
            padding: 0;
        }
    }

    .body-box {
        >h1 {
            font-size: 20px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
            line-height: 60px;
            text-align: center;
            border-bottom: 1px solid #e4e7ed;
            margin-bottom: 20px;
        }
    }
}

// 富文本编辑器
.text-editor-box {
    display: flex;

    .h1-2 {
        width: 85px;
        height: 22px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        text-align: right;
    }

    .h1-2::before {
        content: "* ";
        color: #ff0000;
    }

    /deep/.bt-group {
        display: flex;
        align-items: flex-end;
        position: relative;

        .el-button--preview {
            width: 70px;
            height: 36px;
            background: rgba(255, 255, 255, 1);
            border-radius: 4px;
            border: 1px solid rgba(61, 127, 255, 1);
            color: #3d7fff;
            padding: 0;
            margin-left: 10px;
            position: absolute;
            bottom: -30px;
        }
    }

    .quill-editor {
        /deep/.ql-container {
            min-height: 20vh;
            height: 600px;
        }
    }
}

/deep/.quill-editor {
    width: 1500px;
    height: 600px;
    margin: 0 auto;

    .ql-blank {
        padding-left: 0px;
    }

    .ql-containe {
        height: 600px;
    }
}
</style>
